<template>
  <div class="app-container">
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="线上招聘会" name="1">
          <el-table :data="selJobFairArray" style="width: 100%" sortable>
            <el-table-column prop="prop" label="招聘会内容" width="width">
              <template slot-scope="scope">
                <h3>{{ scope.row.title }}</h3>
                <div>举办时间：2024-10-24 至 2024-10-31</div>
                <div>举办地点：{{ scope.row.address }}</div>
                <div>{{ scope.row.friendly_tips_text }}</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-button
                  :type="scope.row.display ? 'info' : 'primary'"
                  size="small"
                  :disabled="scope.row.display ? 'info' : 'primary'"
                  >{{ scope.row.display ? "报名已结束" : "开始" }}</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-row
            :gutter="10"
            style="margin-top: 20px"
            type="flex"
            justify="end"
          >
            <el-pagination
              @size-change="handleSizeOnLineChange"
              @current-change="handleCurrentOnLineChange"
              :page-sizes="[10, 20, 30, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
            >
            </el-pagination>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="线下招聘会" name="2">
          <el-table :data="data" style="width: 100%">
            <el-table-column prop="prop" label="招聘会内容" width="width">
            </el-table-column>
            <el-table-column prop="prop" label="展位号" width="width">
            </el-table-column>
            <el-table-column prop="prop" label="联系方式" width="width">
            </el-table-column>
            <el-table-column prop="prop" label="审核状态" width="width">
            </el-table-column>
            <el-table-column prop="prop" label="操作" width="width">
            </el-table-column>
          </el-table>
          <el-row
            :gutter="10"
            style="margin-top: 20px"
            type="flex"
            justify="end"
          >
            <el-pagination layout="prev, pager, next" :total="50">
            </el-pagination>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { selJobFairListApi, jobFairAddCompanyApi } from "@/api/jobFair";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      activeName: "1",
      list: [
        {
          id: 2,
          display: 1,
          title: "测试测试某港社区现场招聘会",
          introduction:
            "&lt;p &gt;图文介绍 &lt;\/p &gt;&lt;p &gt;是打发定时发送到发送到 &lt;\/p &gt;",
          address: "地址地址地址地址地址地址",
          contact: "联系人",
          phone: "19012345678",
          bus: "使得点点滴滴点点滴滴",
          sponsor: "某港社区",
          holddate_start: 1730390400,
          holddate_end: 1730995200,
          predetermined_start: 1729699200,
          predetermined_end: 1730131200,
          number: "",
          addtime: 1708093955,
          ordid: 0,
          click: 40,
          participants_object: "区内企业",
          price: "免费",
          registration_method: "企业报名请填写报名表（见附件），到社区现场报名",
          thumb: "https:\/\/qncdn.blwang.com\/2024-02-16-65cf70ba75540.jpg",
          intro_img: 0,
          position_img: "368",
          map_lng: "121.861622",
          map_lat: "29.912619",
          map_zoom: 13,
          tpl_id: 1,
          attach:
            '[{"name":"报名表.docx","url":"files\\\/20240216\\\/d2c76dfcc631929481dcff3268d7a67b.docx","uid":"1708093993852","status":"success"}]',
          company_num: 0,
          predetermined: 2,
          predetermined_text: "已结束",
          friendly_tips_text: "本场招聘会已停止报名，请及时关注最新招聘会",
          holddate: 2,
          holddate_text: "已结束",
          friendly_tips: 2,
          jobfair_url: "http:\/\/hr.blwang.com\/jobfair\/2.html",
          jobs_num: 0,
        },
        {
          id: 1,
          display: 1,
          title: "阳春三月大型现场招聘会",
          introduction: "&lt;p &gt;图文并茂的介绍 &lt;\/p &gt;",
          address: "海宁市人才交流中心",
          contact: "王老师",
          phone: "13800001111，13900009999",
          bus: "798路公交可达",
          sponsor: "主办方",
          holddate_start: 1709222400,
          holddate_end: 1709308800,
          predetermined_start: 1708012800,
          predetermined_end: 1709136000,
          number: "",
          addtime: 1708065559,
          ordid: 0,
          click: 62,
          participants_object: "重点企业",
          price: "免费或收费，收费请转账到XXXX",
          registration_method:
            "通过本平台在线报名：先注册为企业会员，再我要加入，报名即可",
          thumb:
            "http:\/\/hr.blwang.com\/upload\/resource\/empty_jobfair_thumb.jpg",
          intro_img: 0,
          position_img: "",
          map_lng: "121.847824",
          map_lat: "29.910115",
          map_zoom: 13,
          tpl_id: 1,
          attach: "[]",
          company_num: 2,
          predetermined: 2,
          predetermined_text: "已结束",
          friendly_tips_text: "本场招聘会已停止报名，请及时关注最新招聘会",
          holddate: 2,
          holddate_text: "已结束",
          friendly_tips: 2,
          jobfair_url: "http:\/\/hr.blwang.com\/jobfair\/1.html",
          jobs_num: 0,
        },
      ],
      // 查询参数
      selJobFairQuery: {
        page: 1,
        pagesize: 10,
        uid: "",
        type: 1,
      },
      selJobFairArray: [],
    };
  },
  computed: {
    ...mapGetters(["userId"]),
  },
  created() {
    this.selJobFairQuery.uid = this.userId;
    this.selJobFairList();
  },
  methods: {
    // 页码改变
    handleSizeOnLineChange(pageSize) {
      this.selJobFairQuery.pagesize = pageSize;
      this.selJobFairList();
    },
    // 页码改变
    handleCurrentOnLineChange(page) {
      this.selJobFairQuery.page = page;
      this.selJobFairList();
    },
    // 线上列表查询
    async selJobFairList() {
      const res = await selJobFairListApi(this.selJobFairQuery);
      console.log(res);
      this.selJobFairArray = res.recods;
      this.onLineTotal = res.total;
    },
  },
};
</script>

<style lang="scss" scoped></style>
